<template>
  <div style="background-color: white">
    <carousel :carouselList="carouselList"></carousel>
    <div style="padding: 30px 88px 50px 88px" class="index-body">
      <div style="display: flex; justify-content: space-between; align-items: center">
        <div style="display: flex; align-items: end">
          <div :class="flag == 1 ? 'active' : 'normal'" @click="flag = 1">
            {{ $store.state.locale == "zh-cn" ? "多威科技" : "Technology" }}
          </div>
          <div
            :class="flag == 2 ? 'active' : 'normal'"
            @click="flag = 2"
            style="margin-left: 30px"
          >
            {{ $store.state.locale == "zh-cn" ? "资质荣誉" : "Qualification and Honor" }}
          </div>
        </div>
        <div style="color: #666666; font-size: 14px">
          <span style="cursor: pointer" @click="$router.push('/index')">{{
            $store.state.locale == "zh-cn" ? "首页" : "Home"
          }}</span>
          >
          <span style="color: #000000; font-weight: bold" v-show="flag == 1">
            {{ $store.state.locale == "zh-cn" ? "多威科技" : "DO-WIN Technology" }}</span
          >
          <span style="color: #000000; font-weight: bold" v-show="flag == 2">{{
            $store.state.locale == "zh-cn" ? "资质荣誉" : "Qualification and Honor"
          }}</span>
        </div>
      </div>
      <div v-show="flag == 1">
        <div>
          <div style="margin-top: 40px; display: flex; align-items: center">
            <div style="margin-right: 20px" @click="prev(1)">
              <img
                src="@/assets/img/swiper-arrow-left.png"
                style="width: 60px; height: 60px"
                alt=""
              />
            </div>
            <el-carousel
              indicator-position="none"
              class="index-swiper"
              height="400px"
              ref="carouselRef1"
            >
              <el-carousel-item
                class="index-swiper"
                v-for="(item, key) in banner"
                :key="key"
              >
                <div>
                  <el-image
                    :src="item.image"
                    class="index-swiper"
                    style="height: 400px"
                    fit="cover"
                  ></el-image>
                </div>
              </el-carousel-item>
            </el-carousel>
            <div style="margin-left: 20px" @click="next(1)">
              <img
                src="@/assets/img/swiper-arrow-right.png"
                style="width: 60px; height: 60px"
                alt=""
              />
            </div>
          </div>
          <div
            style="
              width: 100%;
              margin-top: 40px;
              text-align: center;
              font-size: 20px;
              font-weight: bold;
            "
          >
            多威-中底科技
          </div>
          <div
            style="width: 100%; height: 4px; background: #dfe5e8; margin: 50px 0"
          ></div>
        </div>
        <div>
          <div style="margin-top: 40px; display: flex; align-items: center">
            <div style="margin-right: 20px" @click="prev(2)">
              <img
                src="@/assets/img/swiper-arrow-left.png"
                style="width: 60px; height: 60px"
                alt=""
              />
            </div>
            <el-carousel
              indicator-position="none"
              class="index-swiper"
              height="400px"
              ref="carouselRef2"
            >
              <el-carousel-item
                class="index-swiper"
                v-for="(item, key) in banner2"
                :key="key"
              >
                <div>
                  <el-image
                    :src="item.image"
                    class="index-swiper"
                    style="height: 400px"
                    fit="cover"
                  ></el-image>
                </div>
              </el-carousel-item>
            </el-carousel>
            <div style="margin-left: 20px" @click="next(2)">
              <img
                src="@/assets/img/swiper-arrow-right.png"
                style="width: 60px; height: 60px"
                alt=""
              />
            </div>
          </div>
          <div
            style="
              width: 100%;
              margin-top: 40px;
              text-align: center;
              font-size: 20px;
              font-weight: bold;
            "
          >
            多威-碳板科技
          </div>
          <!-- <div
            style="width: 100%; height: 4px; background: #dfe5e8; margin: 50px 0"
          ></div> -->
        </div>
      </div>
      <div v-show="flag == 2">
        <div style="display: flex; flex-wrap: wrap; margin-top: 30px">
          <div
            class="item"
            v-for="(item, index) in info.data"
            :key="index"
            @click="previrw(item.id)"
          >
            <el-image
              :src="item.image"
              fit="cover"
              style="width: 200px; height: 280px"
              :preview-src-list="srcList"
            ></el-image>
          </div>
        </div>
        <div style="width: 100%; display: flex; justify-content: center">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="info.total"
            @current-change="currentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import carousel from "@/components/carousel.vue";
export default {
  components: {
    carousel,
  },
  data() {
    return {
      banner: [],
      flag: 1,
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      ],
      name: "",
      info: {},
      params: {
        page: 1,
        limit: 10,
      },
      carouselList: [],
      banner2: [],
    };
  },
  mounted() {
    this.name = this.$route.query.name;
    this.getData();
    this.getCarousel();
    this.getBanner(1);
    this.getBanner(2);
  },
  watch: {
    $route(to, from) {
      console.log(23232);
      this.name = this.$route.query.name;
      this.getData();
      // this.$nextTick(() => {
      //   this.getFlag();
      // });
      // 在mounted函数执行的方法，放到该处
      // 加载页面数据的方法
    },
  },
  computed: {
    language() {
      return this.$store.state.locale;
    },
  },
  methods: {
    currentChange(e) {
      this.params.page = e;
      this.getData();
    },
    getBanner(classify) {
      this.ajaxs("index/slides?translate=" + this.language, {
        data: {
          classify: classify,
        },
        success: (res) => {
          if (classify == 1) {
            this.banner = res.data;
          } else {
            this.banner2 = res.data;
          }
        },
      });
    },
    getCarousel() {
      this.ajaxs("index/slides?translate=" + this.language, {
        data: {
          classify: 5,
        },
        success: (res) => {
          this.carouselList = res.data;
        },
      });
    },
    //获取资质荣誉列表
    getAptitude() {
      this.ajaxs("index/aptitude?translate=" + this.language, {
        data: this.params,
        success: (res) => {
          this.info = res.data;

          console.log(this.info);
        },
      });
    },
    getData() {
      if (this.name == "资质荣誉") {
        this.flag = 2;
      } else {
        this.flag = 1;
      }
      this.getAptitude();
    },
    //预览
    previrw(id) {
      this.srcList = [];
      for (let i = 0; i < this.info.data.length; i++) {
        if (this.info.data[i].id == id) {
          this.srcList.push(this.info.data[i].image);
        }
      }
      console.log(id);
    },
    detail(item) {
      this.$router.push("/dynamic/detail?id=" + item.id);
    },
    //   下一张
    next(i) {
      if (i == 1) {
        this.$refs.carouselRef1.next();
      } else {
        this.$refs.carouselRef2.next();
      }
    },
    //上一张
    prev(i) {
      if (i == 1) {
        this.$refs.carouselRef1.prev();
      } else {
        this.$refs.carouselRef2.prev();
      }
    },
  },
};
</script>

<style scoped>
@import "../../assets/css/index/index.css";
.active {
  font-size: 20px;
  font-weight: bold;
}
.normal {
  color: #bebebe;
  font-size: 18px;
}
/* /deep/ .el-carousel__indicators .is-active .el-carousel__button {
  width: 24px;
  height: 24px;
  background: #ffffff;

  border-radius: 50%;
}
/deep/ .el-carousel__indicators .el-carousel__button {
  background: rgba(255, 255, 255, 0.4);
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #c91d1d;
} */
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #c91d1d;
}
.item {
  background: #f6f6f6;
  border-radius: 10px;
  padding: 13px;
  margin-right: 33px;
  margin-bottom: 30px;
}
.item:nth-child(5n) {
  margin-right: 0;
}
</style>
